<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- React核心包 最先引入  提供一个对象React -->
  <script src="../../react资料_stu/依赖包/react.development.js"></script>
  <!-- ReactDOM包  提供一个对象ReactDOM -->
  <script src="../../react资料_stu/依赖包/react-dom.development.js"></script>
  <!-- babel -->
  <script src="../../react资料_stu/依赖包/babel.min.js"></script>

</head>

<body>
  <div id="app">

  </div>
</body>
<script type="text/babel">

  class Fn extends React.Component {

    // constructor(){
    //   super()
    //   //this 组件实列
    //   //add Fn 的原型方法  组件实列可以使用
    //   //this.add.bind(this) 
    //   //把提供this拿到组件实列的原型方法中的this指向组件实列
    //  this.adds =  this.add.bind(this)
    // 总结 给组件实列添加一个add方法  把 组件实列 原型方法 中 的this 指向组件实列

    // }


    //原来class给实列扩展属性的样式
    // constructor(){
    //   this.name =
    //   super()
    // }
    //ES8
    //直接给实列扩展属性方法
    //缺点不能传参
    // jk = { age: 18 }
    //改变state上的属性 可以重新渲染
    // state 可以影响虚拟DOM的渲染 被称为当前组件的状态
    state={
      content:"hh",
      ishot:true,
      count:0
    }
    //事件函数
    //在组件中，我们希望事件函数中的this指向组件实列 这样 就可以拿到state上的各种数据
    // add(){
      
    //   // console.log(11);
    // }

    add = ()=>{
      //  this.state.count++
       //组件实例身上有有关setState()方法 接受一个对象 会把接受的对象和原有的对象进行合并 并重新渲染
      //  this.setState({count:-1,new:"我是新来的"})
      //  this.setState({count:-2,})
      //不要直接修改state上的值 而是通过 setState方法  合并对象 并重新渲染
      //  this.setState({count:this.state.count + 1})
      let count =  this.state.count
       this.setState({count:count + 1})
       //setState可能是异步的 （处于性能考虑，会等待以下，把多个setState合并成一次更新）
      //  console.log(this.state.count);
    }

    jj = ()=>{
      //  this.state.count++
       //组件实例身上有有关setState()方法 接受一个对象 会把接受的对象和原有的对象进行合并 并重新渲染
      //  this.setState({count:-1,new:"我是新来的"})
      //  this.setState({count:-2,})
      //不要直接修改state上的值 而是通过 setState方法  合并对象 并重新渲染
      //  this.setState({count:this.state.count + 1})
      // let count =  this.state.count
      //  this.setState({count:--count})
      let count = this.state.count
      this.setState({count:count  - 1})
       //setState可能是异步的 （处于性能考虑，会等待以下，把多个setState合并成一次更新）
      //  console.log(this.state.count);
    }


                        
    //render 在 Fn 函数的原型对象上
    //this.state.content
    //this 是组件实列
    //它会找 FN 函数 的原型对象
    render() {
      //改变state触发了 render方法 重新渲染了
      // {console.log(this)}
      console.log("我重新渲染了");
      //解构写法
      //this.state 组件实列的state属性
      const {content , ishot,count} = this.state
      return (<div>

        <p>计数器</p>
        <p onClick={this.add}> + </p>
        <p onClick={this.jj}> - </p>
        <p> {count}</p>
        
      </div>)
    }


  }

  const root = ReactDOM.createRoot(document.getElementById('app'));

  root.render(<Fn />)




</script>


</html>